:root {
  @include tablet-screen {
    --doc-sidebar-width: 280px !important;
  }
}

.menu__link {
  font-size: 14px;
  line-height: 1.25;
  padding-left: 14px;
  padding-right: 14px;

  &:hover {
    background: transparent;
  }

  &--sublist-caret {
    &::after {
      display: none;
    }

    &::before {
      top: 14px;
      position: absolute;
      left: -1px;
      content: "";
      background-repeat: no-repeat;
      width: 10px;
      height: 7px;
      background-size: 10px 7px;
      transition: transform var(--ifm-transition-fast) linear;
    }
  }

  &--active:not(.menu__link--sublist) {
    background: var(--ifm-menu-color-background-active);

    &:hover {
      background: var(--ifm-menu-color-background-active) !important;
    }
  }

  svg {
    display: none;
  }
}

.menu__list-item {
  position: relative;

  > .menu__list {
    font-weight: 350;
    font-size: 14px;
    padding-left: 0;
    margin-left: 14px;
  }

  &.home {
    display: none;
  }
}

nav.menu {
  padding: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */

  .menu__list-item-collapsible:hover {
    background-color: transparent;
  }

  .menu__list-item--collapsed .menu__link--sublist::before {
    transform: rotateZ(-90deg);
  }

  .theme-doc-sidebar-menu {
    > .theme-doc-sidebar-item-category:not(:first-child) {
      margin-bottom: 20px;
    }

    .theme-doc-sidebar-item-category-level-1.menu__list-item {
      > .menu__list-item-collapsible,
      > .menu__list-item-collapsible > .menu__link {
        &--active,
        &:hover {
          background-color: transparent !important;
          color: inherit;
        }
      }
    }
  }
}

html[data-theme="dark"] {
  .menu {
    background-color: $color-gray-1;

    .menu__link:hover,
    .menu__caret:hover {
      color: $color-primary-blue;
    }

    .menu__list-item-collapsible:hover {
      .menu__link {
        color: $color-primary-blue;
      }
    }

    .menu__link {
      color: $color-gray-10;

      &.menu__link--sublist {
        color: $color-white;
      }

      &--active:not(.menu__link--sublist) {
        color: $color-primary-blue;
      }
    }

    .menu__link--sublist-caret::before {
      // background: url('/img/chevron-white.svg');
    }
  }
}

html[data-theme="light"] {
  .menu {
    .menu__link:hover,
    .menu__caret:hover {
      color: $color-secondary-blue;
    }

    .menu__list-item-collapsible:hover {
      .menu__link {
        color: $color-secondary-blue;
      }
    }

    .menu__link {
      color: $color-gray-4;

      &.menu__link--sublist {
        color: $color-black;
      }

      &--active:not(.menu__link--sublist) {
        color: $color-secondary-blue;
      }
    }

    .menu__link--sublist-caret::before {
      // background: url('/img/chevron-black.svg');
    }
  }
}
